/**
 * Created by Juvid on 2017/4/10.
 */
import React, { Component } from 'react';
import {
    Text,
    View,
    FlatList,
    StyleSheet,
    Animated,
} from 'react-native';

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

export default class JuTableView extends React.PureComponent{

    render() {
        return (
            <AnimatedFlatList
                data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}]}
                renderItem={({item}) => <Text style={styles.centering}>{item.key}</Text>}
                horizontal={false}
                ListHeaderComponent={HeadComponent}
                ListFooterComponent={FooterComponent}
                ItemSeparatorComponent={SeparatorComponent}
                onRefresh={this._onRefresh}
                refreshing={false}
                /* data={[ 'a', 'b']}
                 renderItem={({item}) => <Text style={{height:54}}>{item}</Text>}*/
            />
        );
    }
    _onRefresh = () => alert('onRefresh: nothing to refresh :P');
}

class FooterComponent extends React.PureComponent {
    render() {
        return (
            <View style={styles.headerFooterContainer}>
                <View style={styles.headerFooter}>
                    <Text>头部</Text>
                </View>
            </View>
        );
    }
}
class SeparatorComponent extends React.PureComponent {
    render() {
        return (
            <View style={styles.separator}>
            </View>
        );
    }
}
class HeadComponent extends React.PureComponent {
    render() {
        return (
            <View style={styles.headerFooterContainer}>

                <View style={styles.headerFooter}>
                    <Text>尾部</Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    separator: {
        height: 0.5,
        backgroundColor: 'rgb(200, 199, 204)',
    },
    centering: {
        alignItems: 'center',
        justifyContent: 'center',
        padding: 8,
        height:44
    },
    headerFooterContainer:{
        height:40
    },
    headerFooter:{
        height:40,
        justifyContent: 'center',
    }
});